import {FC} from 'react'
import {Item} from './index'
import './todoList.css'
//声明props类型
type Iprops = {
    data:Array<Item> | undefined
    onDel:(id:string) => void
    onCheckIn:(checked:boolean, id:string) => void
}

const TodoList:FC<Iprops>= (props)=>{
    //解构传递下来的数据
    let {data, onDel, onCheckIn } = props
    //check勾选变化
    let handleCheckboxChange = (e:any,id:string)=>{
        // console.log(e.target.checked);
        onCheckIn(e.target.checked,id)
    }
    //创建列表数据
    let lis = data!.map((item:Item)=>{
       return (
            <li className={item.completed?'completed':''} key={item.id}> 
                    <input type="checkbox" checked={item.completed} onChange={(e:any)=>{
                        handleCheckboxChange(e,item.id)
                    }} />
                    &nbsp;&nbsp;
                    <b>{item.todo}</b>
                    &nbsp;&nbsp;
                    <button onClick={()=>{
                        onDel(item.id)
                    }} >删除</button>
                </li>
        )
    })

    return(
        <fieldset>
            <legend>列表</legend>
            <ul>
                {lis}
            </ul>
        </fieldset>
    )
}

export default TodoList